<template>
  <div class="choiceChain">
    <p class="choiceCaption center">{{ $t('tronExchange.plsChooseChain') }}</p>
    <div class="flex">
      <div class="choiceSymbol center">
        <i class="iconfont icon-eosheise"></i>
        <p class="symbolName">EOS</p>
        <div class="flex cont">
          <div class="contLeft"
            :style="$store.state.app.language === 'en' ? 'margin-top: -9px' :
            $store.state.app.language === 'ko' ? 'margin-top: -14px' : ''">
            <div class="mb">{{ $t('quotation.mainLink') }}：</div>
            <div>{{ $t('quotation.sideLink') }}：</div>
          </div>
          <div class="contRight">
            <div class="flex mb">
              <span class="mr15">EOS{{ $t('tronExchange.market') }}</span>
              <span>USDⓈ{{ $t('tronExchange.market') }}</span>
            </div>
            <div class="flex mb" style="margin-top: 11px;">
              <span class="mr15">BOS{{ $t('tronExchange.market') }}</span>
              <span>ENU{{ $t('tronExchange.market') }}</span>
            </div>
            <div class="flex mb">
              <span class="mr15">FIBOS{{ $t('tronExchange.market') }}</span>
              <span>TELOS{{ $t('tronExchange.market') }}</span>
            </div>
            <div class="flex">
              <span>MEETONE{{ $t('tronExchange.market') }}</span>
            </div>
            <el-button type="primary" class="toEosBtn fl" @click="handleToTrade('eos')">
              {{ $t('myWallet.toTransaction1') }}
            </el-button>
          </div>
        </div>
      </div>
      <div class="choiceSymbol center">
        <i class="iconfont icon-tronhongse"></i>
        <p class="symbolName">TRON</p>
        <div class="contTron">
          <div>
            <span style="margin-right: 35px;">USDT{{ $t('tronExchange.market') }}</span>
            <span>TRON{{ $t('tronExchange.market') }}</span>
          </div>
          <el-button type="primary"
            class="toEosBtn toTronBtn"
            @click="handleToTrade('tron')"
            :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'margin-top: 103px' : ''">
            {{ $t('myWallet.toTransaction1') }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { choiceChain } from '@/utils/validate';

export default {
  name: 'choiceChain', // 选择公链
  data() {
    return {
    }
  },
  components: {},
  props: {
    choiceChainVisible: {
      type: Boolean,
      default: true
    }
  },
  watch: {
  },
  computed: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    handleToTrade(chain) {
      choiceChain(chain)
      this.$emit('listenChoiceChain');
    }
  },
}
</script>
<style lang="scss" scoped>
.choiceChain {
  padding: 0 40px 10px;
  margin-top: -20px;

  .choiceCaption {
    font-size: 16px;
    color: #333;
    margin-bottom: 30px;
  }

  .choiceSymbol {
    flex: 1;
    color: #999;

    i {
      display: inline-block;
      font-size: 90px;
      margin-bottom: 20px;
    }

    .icon-eosheise {
      color: #000;
    }

    .icon-tronhongse {
      color: red;
    }

    .symbolName {
      font-size: 20px;
      margin: 5px 0 10px;
      color: #333;
    }

    .cont {
      .contLeft {
        flex: 1;
        min-height: 150px;
        margin-top: -18px;
      }

      .contRight{
        flex: 3;
        min-height: 150px;

        span {
          width: 116px;
          text-align: left;
        }
      }
    }

    .toEosBtn {
      width: 200px;
      margin-top: 20px;

      &.toTronBtn {
        margin-top: 108px;
      }
    }

    .contTron {
      min-height: 150px;
    }
  }
}
.theme-1B1D27 {
  .symbolName, .choiceCaption {
    color: #999 !important;
  }
  .icon-eosheise {
    color: rgba(255, 255, 255, .8) !important;
  }
}
</style>

